import React, { Component } from "react";
import { Table, Form, Modal, Button, message, Input, Popconfirm, Upload } from "antd";
import { getAllPage, deletePage, updatePage, addPage } from "@/api/page";
import CustomModal from "@/components/common/CustomModal";
export default class ActiveManage extends Component {
    constructor() {
        super();
        this.state = {
            columns: [
                {
                    title: "页面id",
                    width: 120,
                    dataIndex: "pageId",
                },
                {
                    title: "页面名称",
                    width: 120,
                    dataIndex: "pageName",
                },
                {
                    title: "操作",
                    width: 300,
                    dataIndex: "operation",
                    render: (text, { pageName, _id: editId, pageId }) => (
                        <div className="operation-wrap">
                            <Button
                                type="primary"
                                onClick={() => {
                                    this.setState({ isAdd: false, FormModalVisible: true, editId }, () =>
                                        this.refs.pageFormRef.setFieldsValue({ pageName, pageId })
                                    );
                                }}
                            >
                                编辑
                            </Button>
                            <Button
                                onClick={() => {
                                    this.props.history.push({ pathname: "/main/page/active/" + editId });
                                }}
                            >
                                修改详情
                            </Button>
                            <Popconfirm
                                title={`确定删除${pageName}吗？`}
                                okText="确定"
                                cancelText="取消"
                                onConfirm={() => {
                                    deletePage({ _id: editId }).then(res => {
                                        if (res.code === 200) {
                                            this.getAllPage_com();
                                            message.success("删除成功");
                                        } else {
                                            message.warn(res.message);
                                        }
                                    });
                                }}
                            >
                                <Button danger>删除</Button>
                            </Popconfirm>
                        </div>
                    ),
                },
            ],
            dataSource: [],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
                onChange: (current, pageSize) => {
                    this.setState({ pagination: { ...this.state.pagination, current, pageSize } }, () => {
                        this.getAllPage_com();
                    });
                },
            },
            FormModalVisible: false,
            isAdd: true,
            editId: null,
        };
    }
    UNSAFE_componentWillMount() {
        this.getAllPage_com();
    }
    getAllPage_com = () => {
        const { current, pageSize } = this.state.pagination;
        getAllPage({ current, pageSize }).then(res => {
            if (res.code === 200) {
                this.setState({
                    dataSource: res.data,
                    pagination: {
                        ...this.state.pagination,
                        total: res.total,
                    },
                });
            }
        });
    };
    render() {
        const { columns, dataSource, pagination, FormModalVisible, isAdd, editId } = this.state;
        return (
            <>
                <div className="mb-10">
                    <Button
                        type="primary"
                        onClick={() => {
                            this.setState({ isAdd: true, FormModalVisible: true }, () => this.refs.pageFormRef.resetFields());
                        }}
                    >
                        新增活动页
                    </Button>
                </div>
                <Table
                    scroll={{
                        x: columns.reduce((pre, item) => {
                            return (pre.width ? pre.width : pre) + (item.width ? item.width : 0);
                        }),
                        y: 600,
                    }}
                    columns={columns}
                    dataSource={dataSource.map(item => ({ ...item, key: item._id }))}
                    pagination={pagination}
                />
                <CustomModal
                    title="新增/编辑活动页"
                    visible={FormModalVisible}
                    onCancel={() => this.setState({ FormModalVisible: false })}
                    onOk={() => {
                        this.refs.pageFormRef.validateFields().then(formData => {
                            if (isAdd) {
                                addPage(formData).then(res => {
                                    if (res.code === 200) {
                                        message.success("新增成功");
                                        this.getAllPage_com();
                                        this.setState({ FormModalVisible: false });
                                    }
                                });
                            } else {
                                updatePage({ ...formData, _id: editId }).then(res => {
                                    if (res.code === 200) {
                                        message.success("编辑成功");
                                        this.getAllPage_com();
                                        this.setState({ FormModalVisible: false });
                                    }
                                });
                            }
                        });
                    }}
                >
                    <Form ref="pageFormRef" wrapperCol={{ span: 12 }} labelCol={{ span: 7 }}>
                        <Form.Item label="页面id" name="pageId" rules={[{ required: true, message: "页面id为必填项" }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="页面名称" name="pageName" rules={[{ required: true, message: "页面名称为必填项" }]}>
                            <Input />
                        </Form.Item>
                    </Form>
                </CustomModal>
            </>
        );
    }
}
